<!--高德地图输入-->
<script setup>
import {ref,watch} from 'vue'

const mapDlg=ref(null)
const emits = defineEmits(["update:modelValue","update:lngLat","change"])
const props=defineProps({
  modelValue:{
    String
  },
  lngLat:{
    String
  }
})
const address=ref(props.modelValue)
const lngLat=ref(props.lngLat)
watch(()=>props.modelValue,(v)=>{
  address.value=v;
})
watch(()=>props.lngLat,(v)=>{
  lngLat.value=v;
})


function openDialog(){
  //104 64,天府三街
   mapDlg.value.open({address:address.value,lngLat:lngLat.value}).then(r=>{
     address.value=r.address
     lngLat.value=r.lngLat
     emits("update:lngLat",r.lngLat)
     emits("update:modelValue",r.address)
     emits("change",r)
   })
}
</script>
<template>
  <div class="h-input h-input-suffix-icon"  @click="openDialog">
    <Input type="text" v-model="address"  readonly/>
    <i class="h-icon-location" style="cursor: pointer"></i>
    <Dialog href="coms/amapSelector.vue" ref="mapDlg" type="drawer-right" hasCloseIcon hasDivider>
      <template #header>
        位置选择
      </template>
      <template #footer="dlg">
        <Button @click="dlg.cancel" :disabled="dlg.loading">取消</Button>
        <Button :loading="dlg.loading" color="primary" @click="dlg.submit">确定</Button>
      </template>
    </Dialog>

  </div>
</template>
